<template>
  <div>
    <SearchContainer @reset="() => formRef.resetFields()" @search="getData">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="zjm" label="">
          <a-input v-model:value="formState.pyjm" class="w-64" placeholder="姓名/助记码/卡号/住院号" />
        </a-form-item>
        <a-form-item name="stdate" label="手术日期" class="ml-4">
          <a-date-picker v-model:value="formState.stdate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex justify-end">
        <a-button class="mb-2" @click="onAdd"> 导出 </a-button>
      </div>
      <BaseTable :columns="columns" :loading="loading" :data-source="tableData" fill :scroll="{ x: 2800 }" :extra-height="40">
        <!-- 自定义表头 -->
        <template #headerCell="{ column }">
          <div v-if="column.subTitle" class="-m-2">
            <div class="border-b p-2">{{ column.title }}</div>
            <div class="p-2">{{ column.subTitle }}</div>
          </div>
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'xh'"> {{ index + 1 }} </template>
          <template v-if="column.dataIndex === 'status'">
            <!-- 0未安排(已签署) 1已安排(待转入) 2作废 3待手术(已转入) 4手术中 5已手术(待转出) 6已转出 7未签署  -->
            <div class="flex items-center justify-between">
              <div>
                <a-tag v-if="record.status === '0'">未安排</a-tag>
                <a-tag v-if="record.status === '1'" color="green">已安排</a-tag>
                <a-tag v-if="record.status === '2'" color="red">作废</a-tag>
                <a-tag v-if="record.status === '3'" color="blue">待手术</a-tag>
                <a-tag v-if="record.status === '4'" color="blue">手术中</a-tag>
                <a-tag v-if="record.status === '5'" color="green">已手术</a-tag>
                <a-tag v-if="record.status === '6'" color="green">已转出</a-tag>
                <a-tag v-if="record.status === '7'" color="green">未签署</a-tag>
              </div>
              <img v-if="record.isDead === 1" src="@/assets/icons/death.png" mode="scaleToFill" />
            </div>
          </template>
          <template v-if="column.dataIndex === 'brName'">
            {{ record.brName }} <span class="text-grey text-xs">{{ record.brXb }} {{ record.brAge }}</span>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <BaseButton v-if="record.status === '4'" confirm-text="确认结束手术?" size="small" type="text" danger @click="onClickOperation(record, 5)"
              >结束手术</BaseButton
            >
            <BaseButton v-if="record.status === '3'" confirm-text="确认开始手术?" size="small" type="link" @click="onClickOperation(record, 4)"
              >开始手术</BaseButton
            >
            <a-button v-if="record.status === '4' || record.status === '5' || record.status === '6'" size="small" type="link" @click="onRecord(record)"
              >手麻记录</a-button
            >
            <BaseButton
              v-if="record.status === '5' && record.isDead === 0"
              confirm-text="确认标记死亡?"
              size="small"
              type="link"
              @click="onClickDeath(record, 1)"
              >标记死亡</BaseButton
            >
            <BaseButton
              v-if="record.status === '5' && record.isDead === 1"
              confirm-text="确认撤销死亡?"
              size="small"
              type="text"
              danger
              @click="onClickDeath(record, 0)"
              >撤销死亡</BaseButton
            >
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>
<script setup>
import { h, ref } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
import { post } from '@/utils/request'
import userStore from './store'
// import Edit from './Edit.vue'
const store = userStore()
const router = useRouter()
const rowData = ref()
const openEditModal = ref(false)
const formRef = ref()
const formState = ref({
  status: '',
  stdate: dayjs().format('YYYY-MM-DD')
})
const onRecord = (record) => {
  store.patientInfo = record
  store.operationDate = formState.value.stdate
  router.push({
    path: '/operation/anesthesia/anesthesia-record'
  })
}

// 标记死亡
const onClickDeath = async (row, isDead) => {
  const { code, msg } = await post('/oprOperation/opr/doUpdateOperationDeathInfo', {
    aptmLsh: row.aptmLsh,
    isDead
  })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  getData()
}

// 开始结束手术
const onClickOperation = async (row, status) => {
  const { code, msg } = await post('/oprOperation/opr/doUpdateOperationStatus', {
    aptmLsh: row.aptmLsh,
    status
  })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  getData()
}

const onAdd = () => {
  openEditModal.value = true
  rowData.value = {}
}

const customRender = ({ record, column }) =>
  h('div', { class: 'w-full' }, [
    h('div', { class: 'border-b p-2 h-10 truncate', title: record[column.dataIndex] }, record[column.dataIndex]),
    h('div', { class: 'p-2 h-10 truncate', title: record[column.subDataIndex] }, record[column.subDataIndex])
  ])

const columns = [
  { title: '序号', dataIndex: 'xh', width: 50 },
  { title: '状态', dataIndex: 'status', width: 80 },

  { title: '手术日期', dataIndex: 'oprDate', width: 100, required: true },
  { title: '手术时间', dataIndex: 'oprTime', width: 100, required: true },
  { title: '手术房间', dataIndex: 'oprRoomName', width: 100, required: true },
  {
    title: '床位号',
    dataIndex: 'lastBedCode',
    width: 100
  },
  {
    title: '住院号/卡号',
    dataIndex: 'admissionCode',
    width: 130
  },
  { title: '姓名', dataIndex: 'brName', width: 130 },
  { title: '来源', dataIndex: 'oprPathStr', width: 80 },
  { title: '部位', dataIndex: 'oprAptmParts', width: 80 },
  { title: '手术名称', dataIndex: 'oprName', width: 180 },
  {
    title: '联合手术1',
    dataIndex: 'jointOprName1',
    subTitle: '联合手术2',
    subDataIndex: 'jointOprName2',
    width: 130,
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  {
    title: '联合手术3',
    dataIndex: 'jointOprName3',
    subTitle: '联合手术4',
    subDataIndex: 'jointOprName4',
    width: 130,
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  {
    title: '联合手术5',
    dataIndex: 'jointOprName5',
    subTitle: '联合手术6',
    subDataIndex: 'jointOprName6',
    width: 130,
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  { title: '嘱托', dataIndex: 'advMemo', subTitle: '特殊需求', subDataIndex: 'specRequirements', customCell: () => ({ class: '!p-0' }), customRender },
  { title: '手术医生', dataIndex: 'oprDoctorName', subTitle: '麻醉医生', subDataIndex: 'anaesDoctorName', customCell: () => ({ class: '!p-0' }), customRender },
  { title: '一助', dataIndex: 'firstNurseName', subTitle: '二助', subDataIndex: 'secondNurseName', customCell: () => ({ class: '!p-0' }), customRender },
  {
    title: '巡回护士',
    dataIndex: 'tourNurseName',
    subTitle: '器械护士',
    subDataIndex: 'instrumenttNurseName',
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  {
    title: '台次',
    dataIndex: 'serialNumber',
    subTitle: '麻醉方式',
    subDataIndex: 'anaesName',
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  {
    title: '手术等级',
    dataIndex: 'oprLevelName',
    subTitle: '手术入路',
    width: 95,
    subDataIndex: 'approachName',
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  {
    title: '手术分类',
    dataIndex: 'oprTypeName',
    subTitle: '切口等级',
    width: 95,
    subDataIndex: 'cutLevelName',
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  // { title: '麻醉方式', dataIndex: 'anaesName' },

  { title: '心电监护', dataIndex: 'isEcgStr', subTitle: '复发', subDataIndex: 'isRecurrenceStr', customCell: () => ({ class: '!p-0' }), customRender },
  {
    title: '预约医生/预约科室',
    dataIndex: 'aptmDoctorName',
    width: 160,
    subTitle: '预约时间',
    subDataIndex: 'aptmTime',
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  { title: '操作', dataIndex: 'action', fixed: 'right', width: 220 }
]

const { loading, tableData, getData } = useTable({
  url: '/oprOperation/opr/getOperationAppointmentList',
  immediate: true,
  pagination: false,
  formatParams: () => {
    return {
      stdate: formState.value.stdate,
      eddate: formState.value.stdate,
      pyjm: formState.value.pyjm,
      statuss: [3, 4, 5, 6]
    }
  },
  // onSuccess: () => {
  //   //oprPath 0：门诊|1：住院 |3手术室
  //   if (tableData.value && tableData.value.length > 0) {
  //     tableData.value.map((item) => {
  //       if (item.oprPath === 0) {
  //         item.oprPathName = '门诊'
  //       } else if (item.oprPath === 1) {
  //         item.oprPathName = '住院'
  //       } else if (item.oprPath === 3) {
  //         item.oprPathName = '手术室'
  //       } else {
  //         item.oprPathName = '-'
  //       }
  //       return item
  //     })
  //   }
  // },
  formatResult: (result = []) => {
    return result.map((item) => {
      return {
        ...item,
        admissionCode: item.oprPath === 1 ? item.admissionCode : item.brId,
        aptmDoctorName: item.aptmDoctorName + '/' + (item.aptmDeptName || ''),
        isEcgStr: item.isEcg ? '是' : '否',
        isRecurrenceStr: item.isRecurrence ? '是' : '否',
        oprPathStr: ['门诊', '住院', '', '手术'][item.oprPath] //手术来源;0：门诊|1：住院 |3手术室
      }
    })
  }
})
</script>
